<template>
  <div>
    <!-- cardType1 竖版 -->
    <div class="card1-box pd-lg card-linear-gradient" v-if="cardType === 1">
      <div class="card1-item">
        <img class="card1-item_avatar" :src="avatar" />
        <div class="card1-item-bottom">
          <div class="text-bold f-big-title ellipsis" style="max-width: 450rpx">
            {{ name }}
          </div>
          <div class="f-caption ellipsis" style="max-width: 450rpx">
            {{ job_name }}
          </div>
          <div
            class="f-caption c-caption mt-md ellipsis"
            style="max-width: 450rpx"
          >
            电话 {{ phone }}
          </div>
          <img class="card1-item_logo" :src="logo" />
        </div>
      </div>
    </div>

    <!-- cardType2 横版 -->
    <div class="card2-box pd-lg card-linear-gradient" v-if="cardType === 2">
      <div class="card2-item">
        <img class="card2-avatar radius-15" :src="avatar" />
        <img
          class="card2-bg"
          src="https://lbqnyv2.migugu.com/images/12/2018/11/GTAVz7BVzjGyQb3ugnp832q08BQVii.png"
        />
        <div class="card2-content">
          <div class="flex-y-center" style="line-height: 37px">
            <img class="icon-sm round-5 fill-body" :src="logo" />
            <div class="f-icontext ml-sm ellipsis" style="max-width: 125px">
              {{ company_name }}
            </div>
          </div>
          <div
            class="flex-x-center flex-column ellipsis"
            style="height: 52px; max-width: 150px"
          >
            <div class="f-title text-bold">{{ name }}</div>
            <div class="f-icontext">{{ job_name }}</div>
          </div>
          <div
            class="f-caption c-paragraph flex-center"
            style="max-width: 150px; margin-top: 22px"
          >
            <div class="card2-icon circle">
              <i class="iconfont iconshouji1"></i>
            </div>
            <div class="ellipsis flex-1">{{ phone }}</div>
          </div>
          <div
            class="f-caption c-paragraph flex-center pt-sm pb-sm"
            style="max-width: 150px"
          >
            <div class="card2-icon circle">
              <i class="iconfont iconyouxiang1"></i>
            </div>
            <div class="ellipsis flex-1">{{ email }}</div>
          </div>
          <div
            class="f-caption c-paragraph flex-center"
            style="max-width: 150px"
          >
            <div class="card2-icon circle">
              <i class="iconfont icondizhi11 text-bold"></i>
            </div>
            <div class="ellipsis flex-1">{{ company_addr }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- cardType4 横版 -->
    <div class="card4-box fill-base" v-if="cardType === 4">
      <div class="card4-item">
        <img class="card4-item_avatar" :src="avatar" />
        <div class="card4-item-bottom radius-15 fill-base box-shadow">
          <div class="flex-between">
            <div
              class="flex-x-center flex-column"
              style="height: 54px; max-width: 225px"
            >
              <div class="f-title text-bold ellipsis">{{ name }}</div>
              <div class="f-icontext ellipsis">{{ job_name }}</div>
            </div>
            <img class="avatar md radius-10" :src="logo" />
          </div>
          <div
            class="f-caption c-caption flex-y-center"
            style="margin-top: 20px"
          >
            <i class="iconfont iconshouye card4-icon"></i>
            <div class="ellipsis" style="max-width: 265px">
              {{ company_name }}
            </div>
          </div>
          <div
            class="f-caption c-caption flex-y-center"
            style="padding: 2px 0px"
          >
            <i class="iconfont icondianhua1 card4-icon"></i>
            <div class="ellipsis" style="max-width: 265px">{{ phone }}</div>
          </div>
          <div class="f-caption c-caption flex-y-center">
            <i class="iconfont icondizhi11 card4-icon"></i>
            <div class="ellipsis" style="max-width: 515px">
              {{ company_addr }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 发名片/保存到通讯录 -->
    <div v-if="o.data.isShowSendBtn || o.data.isShowSaveBtn">
      <div
        class="flex-between fill-base pt-md pb-md pl-lg pr-lg"
        v-if="o.data.isShowSendBtn && o.data.isShowSaveBtn"
      >
        <div
          class="md save-card-btn flex-center radius"
          :style="{ color: primaryColor, border: '1px solid' + primaryColor }"
        >
          发名片
        </div>
        <div
          class="md save-card-btn flex-center radius c-base"
          :style="{ backgroundColor: primaryColor }"
        >
          保存到通讯录
        </div>
      </div>
      <div class="flex-between fill-base pt-md pb-md pl-lg pr-lg" v-else>
        <div
          class="md save-card-btn flex-center radius"
          :style="{
            color: primaryColor,
            border: '1px solid' + primaryColor,
            width: '100%'
          }"
          v-if="o.data.isShowSendBtn"
        >
          发名片
        </div>
        <div
          class="md save-card-btn flex-center radius c-base"
          :style="{ backgroundColor: primaryColor, width: '100%' }"
          v-else
        >
          保存到通讯录
        </div>
      </div>
    </div>

    <!-- 查看更多名片信息 -->
    <div
      class="scroll-box fill-base pt-md pl-lg pb-md"
      v-if="
        o.data.isShowPhone ||
        o.data.isShowZuoji ||
        o.data.isShowHotPhone ||
        o.data.isShowWechat ||
        o.data.isShowEmail ||
        o.data.isShowCompanyName ||
        o.data.isShowDeptName ||
        o.data.isShowCompanyAddr
      "
    >
      <div class="scroll-item" v-if="o.data.isShowPhone">
        <div class="scroll-block f-caption">
          <div class="flex-y-center">
            <div
              class="iconfont icondianhua2"
              :style="{ color: primaryColor }"
            ></div>
            <div class="c-caption ml-sm">拨打电话</div>
          </div>
          <div>{{ phone }}</div>
        </div>
      </div>
      <div class="scroll-item" v-if="o.data.isShowZuoji">
        <div class="scroll-block f-caption">
          <div class="flex-y-center">
            <div
              class="iconfont iconshiwu-zuoji"
              :style="{ color: primaryColor }"
            ></div>
            <div class="c-caption ml-sm">拨打座机</div>
          </div>
          <div>{{ telphone }}</div>
        </div>
      </div>
      <div class="scroll-item" v-if="o.data.isShowHotPhone">
        <div class="scroll-block f-caption">
          <div class="flex-y-center">
            <div
              class="iconfont iconicon-test1"
              :style="{ color: primaryColor }"
            ></div>
            <div class="c-caption ml-sm">400热线</div>
          </div>
          <div>{{ hotPhone }}</div>
        </div>
      </div>
      <div class="scroll-item" v-if="o.data.isShowWechat">
        <div class="scroll-block f-caption">
          <div class="flex-y-center">
            <div
              class="iconfont iconweixin3"
              :style="{ color: primaryColor }"
            ></div>
            <div class="c-caption ml-sm">复制微信</div>
          </div>
          <div>{{ wechat }}</div>
        </div>
      </div>
      <div class="scroll-item" v-if="o.data.isShowEmail">
        <div class="scroll-block f-caption">
          <div class="flex-y-center">
            <div
              class="iconfont iconyouxiang"
              :style="{ color: primaryColor }"
            ></div>
            <div class="c-caption ml-sm">复制邮箱</div>
          </div>
          <div>{{ email }}</div>
        </div>
      </div>
      <div class="scroll-item" v-if="o.data.isShowCompanyName">
        <div class="scroll-block f-caption">
          <div class="flex-y-center">
            <div
              class="iconfont icongongsi"
              :style="{ color: primaryColor }"
            ></div>
            <div class="c-caption ml-sm">公司名称</div>
          </div>
          <div>{{ company_name }}</div>
        </div>
      </div>
      <div class="scroll-item" v-if="o.data.isShowDeptName">
        <div class="scroll-block f-caption">
          <div class="flex-y-center">
            <div
              class="iconfont icongongsi"
              :style="{ color: primaryColor }"
            ></div>
            <div class="c-caption ml-sm">部门名称</div>
          </div>
          <div>{{ dept_name }}</div>
        </div>
      </div>
      <div class="scroll-item" v-if="o.data.isShowCompanyAddr">
        <div class="scroll-block f-caption">
          <div class="flex-y-center">
            <div
              class="iconfont icondizhi1"
              :style="{ color: primaryColor }"
            ></div>
            <div class="c-caption ml-sm">导航地址</div>
          </div>
          <div>{{ company_addr }}</div>
        </div>
      </div>
    </div>
    <!-- 最近浏览的人 -->
    <div
      class="h-100 flex-between fill-base pl-lg pr-lg"
      v-if="o.data.isShowViewPeople || o.data.isShowThumb"
    >
      <div>
        <div class="flex-y-center" v-if="o.data.isShowViewPeople">
          <img
            class="avatar look"
            :src="item"
            v-for="(item, index) in div_list"
            :key="index"
          />
          <div class="f-caption c-caption">最近{{ div_cout }}人浏览</div>
        </div>
      </div>
      <div class="flex-y-baseline" v-if="o.data.isShowThumb">
        <div class="f-caption c-caption mr-sm fill-base">
          点赞 {{ thumbCount }}
        </div>
        <div
          :class="[
            'iconfont',
            { 'iconlike-b': isThumbs == 1 },
            { iconlike: isThumbs != 1 },
            'mb-sm'
          ]"
          :style="{ color: isThumbs == 1 ? primaryColor : '' }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cardType',
  props: {
    o: Object
  },
  data () {
    return {
      cardType: 2,
      primaryColor: '#19c865',
      avatar: 'https://lbqny.migugu.com/admin/diy/default.png',
      logo: 'https://lbqny.migugu.com/admin/diy/default.png',
      name: '张三',
      job_name: '总经理',
      phone: '18212345678',
      telphone: '028-1234567',
      hotPhone: '400-1234567',
      wechat: 'wechat_account_001',
      email: '1234567890@qq.com',
      company_name: '某某科技有限公司',
      dept_name: '销售部',
      company_addr: '四川省成都市高新区',
      div_list: [
        'https://lbqny.migugu.com/admin/diy/default.png',
        'https://lbqny.migugu.com/admin/diy/default.png',
        'https://lbqny.migugu.com/admin/diy/default.png',
        'https://lbqny.migugu.com/admin/diy/default.png',
        'https://lbqny.migugu.com/admin/diy/default.png',
        'https://lbqny.migugu.com/admin/diy/default.png'
      ],
      div_cout: 36,
      thumbCount: 20,
      isThumbs: 1
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.card-linear-gradient {
  background: linear-gradient(to bottom, #eaeaea, #ffffff);
}

/* cardType1 */
.card1-item {
  width: 343px;
  background: #fff;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  border-radius: 7px;
  position: relative;
  overflow: hidden;
}

.card1-item_avatar {
  width: 343px;
  height: 343px;
  background: #f4f6f8;
}

.card1-item-bottom {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 25px;
  position: relative;
}

.card1-item_logo {
  position: absolute;
  right: 25px;
  top: 15px;
  width: 50px;
  height: 50px;
  background: #f4f6f8;
  border-radius: 7px;
}

/* cardType2 */
.card2-item {
  width: 343px;
  height: 200px;
  background: #fff;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  border-radius: 7px;
  position: relative;
}

.card2-avatar {
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  height: 200px;
  background: #eaeaea;
}

.card2-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 217px;
  height: 200px;
  z-index: 2;
}

.card2-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 343px;
  height: 200px;
  padding-left: 19px;
  z-index: 3;
}

.card2-icon {
  width: 17px;
  height: 17px;
  background: #eaeaea;
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card2-icon .iconfont {
  color: #969696;
  font-size: 11px;
  line-height: 1;
}

/* cardType4 */
.card4-box {
  width: 100%;
  height: 487px;
  position: relative;
}

.card4-item_avatar {
  width: 375px;
  height: 375px;
  background: #f4f6f8;
}

.card4-item-bottom {
  width: 343px;
  height: 175px;
  padding: 24px;
  position: absolute;
  left: 16px;
  bottom: 25px;
}

.card4-icon {
  font-size: 15px;
  margin-right: 5px;
}
/* 发名片/保存到通讯录 */
.save-card-btn {
  width: 48%;
  height: 50px;
  font-size: 16px;
}
/* 查看更多名片信息 */
.scroll-box {
  width: 370px;
  height: 74px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.scroll-box::-webkit-scrollbar {
  display: none;
}
.scroll-item {
  margin-right: 10px;
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.scroll-item:nth-last-child(1) {
  margin-right: 16px;
}
.scroll-block {
  min-width: 110px;
  height: 55px;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 15px;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
}
/* 最近浏览的人 */
.avatar.look {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-right: 5px;
}
</style>
